﻿(function ($, Handlebars) {
  var template =
    '<div id="dr_{{el2}}" class="data-render">'
    + '  <table class="table table-bordered table-header {{class}}">'
    + '   <thead>'
    + '    <tr class="table-primary">'
    + '      <th><div style="width:70px;text-align:center;">序号</div></th>'
    + '       {{#each columns}}'
    + '       <th><div style="width:{{width}}px">{{title}}</div></th>'
    + '       {{/each}}'
    + '     </tr>'
    + '   </thead>'
    + '  </table>'
    + '  <div class="table-content" style="max-height:420px;">'
    + '    <table class="table table-bordered table-striped table-hover {{class}}">'
    + '       <tbody>'
    + '       {{#each datas}}'
    + '       <tr>'
    + '         <td><div style="width:70px;text-align:center;">{{row @index}}</div></td>'
    + '         {{#each ../columns}}'
    + '         <td title="{{ get ../. field}}"><div style="width:{{width}}px">{{ get ../. field}}</div></td>'
    + '         {{/each}}'
    + '       </tr>'
    + '      {{/each}}'
    + '      </tbody>'
    + '    </table>'
    + '  </div>'
    + '</div>';

  var tpl = Handlebars.compile(template);

  Handlebars.registerHelper('row', function (index) {
    return index + 1;
  });

  Handlebars.registerHelper('get', function (obj, field) {
    return (obj || {})[field];
  });

  window.dataRender = function (options) {
    options.el2 = options.el.replace(/#/ig, '');

    var id = '#dr_' + options.el2;
    var html = tpl(options);

    $(options.el).html(html);

    $(id).find('.table-content').css({
      width: $(id).find('.table-header').width()+6
    });

    return;

    $.ajax({
      url: options.url,
      method: options.method || 'get',
      dataType: options.dataType || 'json',
      sucess: function (rs) {

      }
    });
  };
})(jQuery, Handlebars);